import { Typography } from "antd";
import { message } from "antd";
import { Button, DatePicker, Space } from "antd";
import { Card } from "antd";
import { useState } from "react";

const { RangePicker } = DatePicker;

const IntervalMonth = () => {
  const [dates, setDates] = useState([]);
  const [result, setResult] = useState(-1);

  const CardStyle = {
    width: document.body.clientWidth / 2,
  };

  const onRangeChange = (dates) => {
    setDates(dates);
  };

  const calculateInterval = () => {
    if (dates.length === 0) {
      message.warning("未选中月份");
      return;
    }
    const diff = dates[1].diff(dates[0], "month");
    setResult(diff + 1);
  };

  const reset = () => {
    setDates([null, null]);
    setResult(-1);
  };

  return (
    <Card title="月份间隔计算" style={CardStyle}>
      <Space>
        <RangePicker
          value={dates}
          picker="month"
          allowClear
          onChange={onRangeChange}
        />
        <Button type="primary" onClick={calculateInterval}>
          计算
        </Button>
        <Button onClick={reset}>重置</Button>
      </Space>
      <div style={{ marginTop: "20px" }}>
        {result >= 0 && (
          <Typography.Title level={3}>间隔 {result} 个月</Typography.Title>
        )}
      </div>
    </Card>
  );
};

export default IntervalMonth;
